import { ProjectListScreen } from "screens/project-list";
import { useAuth } from "context/auth-context";
import styled from "@emotion/styled";
import { Row } from "components/lib";
import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { Dropdown, Menu, Button } from "antd";

export const AuthenticatedApp = () => {
  const { logout, user } = useAuth();
  return (
    <div>
      <PageHeader>
        <HeaderLeft>
          <SoftwareLogo width={"18rem"} color={"rgb(38, 132, 255)"} />
          <h2>項目</h2>
          <h2>用戶</h2>
        </HeaderLeft>
        <HeaderRight>
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key={"logout"}>
                  <Button type={"link"} onClick={logout}>
                    登出
                  </Button>
                </Menu.Item>
              </Menu>
            }
          >
            <Button type={"link"} onClick={(e) => e.preventDefault()}>
              {`Hi, ${user?.name}`}
            </Button>
          </Dropdown>
        </HeaderRight>
      </PageHeader>
      <Main>
        <ProjectListScreen />
      </Main>
    </div>
  );
};

const PageHeader = styled(Row)`
  height: 6rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
`;

const HeaderLeft = styled.div`
  > * {
    display: inline-block;
    margin: 0;
  }
  > * + * {
    margin-left: 1.8rem;
  }
`;

const HeaderRight = styled.div`
  margin-left: auto;
`;

const Main = styled.main`
  height: cal(100vh - 6rem);
`;
